<template>
  <div>
    <!-- 押金单待支付 -->
    <el-dialog
      v-el-drag-dialog
      title="押金单待支付页面"
      :visible.sync="visible"
      width="1024px"
      @closed="reset"
    >
      <el-form ref="form" class="form" :model="temp" label-width="120px" label-position="right">
        <el-form-item label="押金单号">
          <el-input
            v-model="temp.depositCode"
            disabled
          />
        </el-form-item>
        <el-form-item label="收据单号">
          <el-input
            v-model="temp.billCode"
            disabled
          />
        </el-form-item>
        <el-form-item label="应支付金额">
          <el-input
            v-model="totalDeposit"
            disabled
          />
        </el-form-item>

        <!-- 支付方式 -->
        <el-form-item label="请选择支付方式" style="width: 100%;">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="现金" name="first">现金</el-tab-pane>
            <el-tab-pane label="微信" name="tencent">
              <div v-if="activeName === 'tencent'" id="qrcode" ref="qrCodeUrl" />
            </el-tab-pane>
            <el-tab-pane label="支付宝" name="alibaba">
              <div v-if="activeName === 'alibaba'" id="qrcode" ref="qrCodeUrl" />
            </el-tab-pane>
            <el-tab-pane label="工行支付" name="commerce">
              <div v-if="activeName === 'commerce'" id="qrcode" ref="qrCodeUrl" />
            </el-tab-pane>
          </el-tabs>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="activeName === 'first'" type="primary" @click="onCash">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { queryCashPledgeObtainAuthorize, queryCashPledgeObtainSave, queryCashPledgeObtainGetICBCCode } from '@/api'
  import QRCode from 'qrcodejs2'

  export default {
    name: 'receipt',
    data() {
      return {
        visible: false,
        checkInterval: '',
        timeEndOut: 0,
        temp: {},
        QRImg: {},
        activeName: 'tencent'
      }
    },
    computed: {
      // 应支付金额
      totalDeposit: function() {
        const fee1 = this.temp.fee1 ? this.temp.fee1 : 0.00
        return (this.temp.totalDeposit + fee1).toFixed(2)
      }

    },
    async created() {},
    methods: {
      open(temp) {
        console.log('temp', temp)
        this.temp = temp
        this.gainQRCode()
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      handleClick(tab, event) {
        if (this.activeName !== 'first') {
          this.gainQRCode()
        }
      },
      // 客户押金单支付获取微信/支付宝授权生成二维码
      async gainQRCode() {
        const fee1 = this.temp.fee1 ? this.temp.fee1 : 0.00
        var res = {}
        if (this.activeName === 'commerce') {
          if ((this.temp.totalDeposit + fee1) * 100 === 0) {
            this.$message({
              type: 'warning',
              message: '应支付金额为0,不支持工行支付'
            })
            return
          }
          console.log('公商银行接口')
          res = await queryCashPledgeObtainGetICBCCode({
            depositCode: this.temp.depositCode,
            payMoney: this.temp.totalDeposit + fee1
          })
        } else {
          res = await queryCashPledgeObtainAuthorize({
            depositCode: this.temp.depositCode,
            payMoney: (this.temp.totalDeposit + fee1) * 100,
            payWay: this.activeName
          })
        }
        console.log('获二维码', res)
        this.QRImg = res.data
        const uuid = this.QRImg.prePayId
        const casService = `${this.QRImg.codeUrl}`
        const codeUrl = casService + '?uuid=' + uuid
        this.creatQrCode(codeUrl)
        // 轮询开启
        this.timeEndOut = 1000
        // this.checkingPay()
      },
      creatQrCode(url) {
        // 解决qrcode动态生成二维码时多次点击生成多个二维码的问题
        document.getElementById('qrcode').innerHTML = ''
        new QRCode(this.$refs.qrCodeUrl, {
          text: url,
          width: 260,
          height: 260,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
      },
      // 现金支付
      onCash() {
        this.$confirm('确认现金支付?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const { status } = await queryCashPledgeObtainSave({
            depositCode: this.temp.depositCode
          })
          if (status === 200) {
            this.$message({
              type: 'success',
              message: '现金支付成功'
            })
            this.$emit('upDataReceipt')
            this.visible = false
          }
        })
      },
      // 定时器
      checkingPay() {
        console.log('轮询开始',)
        const _this = this
        _this.checkInterval = setInterval(function() {
          if (_this.timeEndOut === 0) {
            clearInterval(_this.checkInterval)
          }
          if (_this.timeEndOut > 0) {
            var timeEndOut = _this.timeEndOut
            timeEndOut--
            _this.timeEndOut = timeEndOut
            _this.selectPayStatus()
          }
        }, 1000)
      },
      // 支付轮询查看押金订单是否支付成功
      async selectPayStatus() {
        const { status } = await queryCashPledgeObtainSave({
          depositCode: this.temp.depositCode
        })
        console.log('开始',)
        if (status === 200) {
          this.$message({
            type: 'success',
            message: '支付成功'
          })
          this.$emit('upDataReceipt')
          this.visible = false
        }
      },
      reset() {
        this.QRImg = {}
      }
    }
  }
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  & /deep/ .el-form-item {
    width: 33%;
  }
  .block {
    width: 100%;
  }
}
</style>
